<template>
  <div class="systemNotify">
    <div class="top" v-if="task_notify_list.length>0">
      <ul>
        <li>标题</li>
        <li>内容</li>
        <li>时间</li>
      </ul>
    </div>
    <div v-if="task_notify_list.length==0" class="default-page">
      <img src="../../../assets/img/defaultPage/pic_zwsj.png" alt="">
      <p>暂无数据</p>
    </div>
    <div class="content">
      <vuescroll :ops="ops">
        <ul v-for="(item,index) in task_notify_list" :key="index">
          <li><i v-if="!item.userRead"></i>{{item.title}}</li>
          <li>{{item.content}}</li>
          <li>{{new Date(item.addTime).Format('yyyy-MM-dd hh:mm')}}
            <span @click="setUserRead(item)" v-show="'1,2,3,4,5,6'.indexOf(item.msgType) != -1">查看</span>
          </li>
        </ul>
      </vuescroll>
    </div>
    <!--    任务详情-->
    <div v-if="is_show_details">
      <taskDetails :data="data_taskDetails" @close="closeDetails" @openTaskHandle="openTaskHandle"></taskDetails>
    </div>
    <loading v-if="is_show_loading"></loading>
    <!--    任务处理-->
    <div v-if="taskHandle_is_show">
      <taskHandle :data="taskHandle_data" @close="closeTaskHandle" @end="taskHandle_end"></taskHandle>
    </div>
  </div>
</template>

<script>
  import vuescroll from 'vuescroll'
  import taskDetails from '@/components/taskDetails'
  import taskHandle from '@/components/taskDetails/handle'
  import loading from '@/components/loading'

  export default {
    name: "SystemNotify",
    components: {
      vuescroll,taskDetails, taskHandle,loading
    },
    data() {
      return {
        taskHandle_data: {},//任务处理对象
        taskHandle_is_show:false,
        is_show_loading:true,
        is_show_details:false,
        ops: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
            initialScrollY: false,
            initialScrollX: false,
            verticalNativeBarPos: 'right',
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '200px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '0px'//距离容器的距离
          },
          bar: {
            onlyShowBarOnScroll: false,//是否只在滚动时显示bar
            background: '#cbd5df',
            keepShow: true,
            size: '4px',
            minSize: false
          }
        },//滚动配置
        task_notify_list: [],
        data_taskDetails:{}
      }
    },
    created() {
      this.get_task_notify()
    },
    methods: {
      closeDetails(){
        this.is_show_details=false;
      },
      // 关闭任务处理框
      closeTaskHandle() {
        //关闭任务处理框
        this.taskHandle_is_show = false;
        //打开任务详情
        this.is_show_details = true;
      },
      //任务处理完成后的回调
      taskHandle_end(){
        //关闭任务详情框
        this.is_show_details = false;
        //关闭任务处理框
        this.taskHandle_is_show = false;
        // this.init();
      },
      //打开处理框
      openTaskHandle() {
        //关闭任务详情框
        this.is_show_details = false;
        //打开任务处理框
        this.taskHandle_is_show = true;
      },
      get_task_notify() {
        this.$http.get('user/user/push/msg/taskPage', {
          params: {
            userId: this.$store.state.userInfo.userId,
            pageNum: 1,
            pageSize: 999
          }
        }).then(res => {
          if (res.statusCode == 200) {
            this.task_notify_list = res.data.list||[];
            setTimeout(()=> {
              this.is_show_loading=false;
            }, 1000);
          } else {
            this.$message.error(res.statusMsg);
          }
        })
      },
      setUserRead(item) {
        console.log(item);
        this.data_taskDetails.taskId = item.foreignId;
        let type='my_task_list';
        //设置为已读
        if(!item.userRead){
          this.$http.post('user/user/push/msg/userRead', {
            all: false,
            pushMsgId: item.pushMsgId,
            type: 2,
            userId: this.$store.state.userInfo.userId,
          }).then(res => {
            if (res.statusCode == 200) {
              item.userRead = true;
              let obj=this.$store.state.countUnRead;
              obj.taskMsgCount=obj.taskMsgCount-1;
              this.$store.commit('SET_COUNT_UNREAD', obj);
            } else {
              this.$message.error(res.statusMsg);
            }
          });
        }
        //请求任务详情接口
        let params = {
          userId: this.$store.state.userInfo.userId,
          taskId: item.foreignId,
        };
        this.$http.get('/task/task/query/info', {params: params}).then(res => {
          if (res.statusCode == 200) {
            this.taskHandle_data=res.data;
            this.taskHandle_data.taskId=item.foreignId;
            if(res.data.state==2){
              //完成
              type='my_assign_list_have';
            }
            this.data_taskDetails.type = type;
            this.is_show_details=true;
          } else {
            this.$message.error(res.statuaMsg)
          }
        });
      }
    },
  }
</script>

<style scoped type="text/scss" lang="scss">
  .systemNotify {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 24px;
  position: relative;
    .top {
      height: 48px;
      line-height: 48px;
      background-color: #F2F6F9;
      font-size: 14px;
      color: #96A2AA;
      padding-left: 49px;

      > ul {
        display: flex;

        li:nth-child(1) {
          flex: 1;
        }

        li:nth-child(2) {
          flex: 1;
        }

        > li:last-child {
          width: 330px;
        }
      }
    }

    .content {
      height: calc(100% - 24px - 24px);

      ul {
        display: flex;
        color: #454A55;
        font-size: 14px;
        padding-left: 49px;
        line-height: 60px;
        border-bottom: 1px solid #EEEEEE;

        li:nth-child(1) {
          flex: 1;
          position: relative;

          i {
            position: absolute;
            width: 6px;
            height: 6px;
            background-color: #FC5A44;
            border-radius: 6px;
            left: -20px;
            top: 26px;
          }
        }

        li:nth-child(2) {
          flex: 1;
        }

        > li:last-child {
          width: 330px;
          position: relative;

          > span {
            cursor: pointer;
            right: 32px;
            top: 15px;
            position: absolute;
            width: 64px;
            line-height: 32px;
            background-color: #0755DB;
            border-radius: 4px;
            text-align: center;
            color: #ffffff;
            font-size: 14px;
          }
        }
      }
    }
  }
</style>
